<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>config plubin </title>
  <link rel="stylesheet" href="./js/index.css">
  <script src="./js/vue.js"></script>
  <script src="./js/index.js"></script>
  <script src="./js/axios.min.js"></script>
  <script src="./js/index_vue.js"></script>
  <script src="./js/index_vue_data.js"></script>
  <script src="./js/index_vue_method.js"></script>
</head>

<body>
  <div id="app">
    <el-container>
      <el-header>
        <el-steps :active="step_num" finish-status="success">
          <el-step title="配置读数据插件" icon="el-icon-setting"></el-step>
          <!-- <el-step title="配置转换" icon="el-icon-edit"></el-step> -->
          <el-step title="配置写数据插件" icon="el-icon-setting"></el-step>
          <el-step title="整体配置" icon="el-icon-finished"></el-step>
        </el-steps>
      </el-header>
      <el-main>
        <!-- 选择读插件的select -->
        <el-form label-width="100px" v-show="step_num===1">
          <el-form-item label="选择插件">
            <el-select v-model="read_plugin_name" placeholder="选择读数据插件" @change="read_plugin_value_change">
              <el-option v-for="item in read_plugin_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <!-- 选择写插件的select -->
        <el-form label-width="100px" v-show="step_num===2">
          <el-form-item label="选择插件">
            <el-select v-model="write_plugin_name" placeholder="选择写数据插件" @change="write_plugin_value_change">
              <el-option v-for="item in write_plugin_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>


        <!-- 整体配置视图 -->
        <el-dialog title="配置读取插件" :visible="step_num===3" @close="step_num===3?step_num--:step_num">
          <el-form label-width="100px">
            <el-form-item label="任务名称" required>
              <!-- 结果展示 -->
              <el-input v-model="job_name"></el-input>
            </el-form-item>
            <!-- 配置通道个数 -->
            <el-form-item label="配置通道数">
              <el-input-number v-model="channel" :step="1" controls-position="left" @change="channel_value_change"
                :min="1" :max="1024">
              </el-input-number>
            </el-form-item>
            <el-form-item label="描述">
              <!-- 结果展示 -->
              <el-input type="textarea" v-model="job_exp" rows="5"></el-input>
            </el-form-item>
            <el-form-item label="JSON结果">
              <!-- 结果展示 -->
              <el-input type="textarea" v-model="json_result" :readonly="true" rows="20"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="exec_plugin">执行 & 新任务</el-button>
            </el-form-item>
          </el-form>
        </el-dialog>
      </el-main>
      <el-footer>
        <el-table :data="jobInfoData" style="width: 100%">
          <el-table-column prop="Uuid" label="UUID" width="360">
          </el-table-column>
          <el-table-column prop="Name" label="名称" width="250">
          </el-table-column>
          <el-table-column prop="Created" label="日期" width="180">
          </el-table-column>
          <el-table-column prop="Stat" label="状态" width="180">
          </el-table-column>
          <el-table-column prop="Exp" label="描述" width="300">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="300">
            <template slot-scope="jobInfoDataScope">
              <el-button @click.native.prevent="jobInfoStartRow(jobInfoDataScope.row)" type="primary" size="small">
                开始
              </el-button>
              <el-button @click.native.prevent="jobInfoLogInfo(jobInfoDataScope.row)" type="text" size="small">
                日志
              </el-button>
              <el-button @click.native.prevent="jobInfoDeleteRow(jobInfoDataScope.row)" type="text" size="small">
                删除
              </el-button>
              <el-button @click.native.prevent="jobInfoEditRow(jobInfoDataScope.row)" type="text" size="small">
                编辑
              </el-button>

            </template>
          </el-table-column>
        </el-table>
      </el-footer>
    </el-container>

    <!-- 配置mysqlreader数据插件的对话框 -->

    <el-dialog title="配置读取插件" :visible="read_plugin_name==='mysqlreader'" @close="read_plugin_name=''">
      <el-form ref="" :model="mysql_reader" label-width="100px">
        <el-form-item label="插件名称">
          <el-input v-model="read_plugin_name" :readonly="true">
          </el-input>
        </el-form-item>
        <el-form-item label="JDBC连接" required>
          <el-input v-model="mysql_reader.jdbcUrl" placeholder="对端数据库的JDBC连接信息，如jdbc:mysql://127.0.0.1:3306/test">
          </el-input>
        </el-form-item>
        <el-form-item label="驱动名称">
          <el-input v-model="mysql_reader.driver" placeholder="自定义驱动类名，解决兼容性问题" :readonly="true"></el-input>
        </el-form-item>
        <el-form-item label="账号" required>
          <el-input v-model="mysql_reader.username" placeholder="数据源的用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" required>
          <el-input v-model="mysql_reader.password" placeholder="数据源指定用户名的密码"></el-input>
        </el-form-item>
        <el-form-item label="读取表" required>
          <el-input v-model="mysql_reader.table" placeholder="所选取的需要同步的表名,使用JSON数据格式，当配置为多张表时，用户自己需保证多张表是同一表结构">
          </el-input>
        </el-form-item>
        <el-form-item label="表中列" required>
          <el-input v-model="mysql_reader.column" placeholder="所配置的表中需要同步的列名集合，例: *"></el-input>
        </el-form-item>
        <el-form-item label="分片键">
          <el-input placeholder="使用splitPk代表的字段进行数据分片,例: 指定主键列" v-model="mysql_reader.splitPk"></el-input>
        </el-form-item>
        <el-form-item label="猜测分片建">
          <el-switch v-model="mysql_reader.autoPk" placeholder="是否自动猜测分片主键"></el-switch>
        </el-form-item>
        <el-form-item label="where条件">
          <el-input v-model="mysql_reader.where" placeholder="针对表的筛选条件" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="查询sql">
          <el-input v-model="mysql_reader.querySql" type="textarea"
            placeholder="使用自定义的SQL而不是指定表来获取数据，当配置了这一项之后，Addax系统就会忽略 table，column这些配置项"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="read_plugin_save">保存 & 下一步</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>



    <!-- 配置postgresql数据写插件的对话框 -->

    <el-dialog title="配置写插件" :visible="write_plugin_name==='postgresqlwriter'" @close="write_plugin_name=''">
      <el-form ref="" :model="postgresql_writer" label-width="100px">
        <el-form-item label="插件名称">
          <el-input v-model="write_plugin_name" :readonly="true">
          </el-input>
        </el-form-item>
        <el-form-item label="JDBC连接" required>
          <el-input v-model="postgresql_writer.jdbcUrl" placeholder="对端数据库的JDBC连接信息，如jdbc:mysql://127.0.0.1:3306/test">
          </el-input>
        </el-form-item>
        <el-form-item label="账号" required>
          <el-input v-model="postgresql_writer.username" placeholder="数据源的用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" required>
          <el-input v-model="postgresql_writer.password" placeholder="数据源指定用户名的密码"></el-input>
        </el-form-item>
        <el-form-item label="写入模式">
          <el-radio-group v-model="postgresql_writer.writeMode">
            <el-radio label="insert"></el-radio>
            <el-radio label="update"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="读取表" required>
          <el-input v-model="postgresql_writer.table" placeholder="所选取的需要同步的表名,使用JSON数据格式，当配置为多张表时，用户自己需保证多张表是同一表结构">
          </el-input>
        </el-form-item>
        <el-form-item label="表中列" required>
          <el-input v-model="postgresql_writer.column" placeholder="所配置的表中需要同步的列名集合，例: *"></el-input>
        </el-form-item>

        <el-form-item label="初始语句">
          <el-input v-model="postgresql_writer.preSql"
            placeholder="执行数据同步任务之前率先执行的sql语句，目前只允许执行一条SQL语句，例如清除旧数据, 涉及到的表可用 @table表示" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="post语句">
          <el-input v-model="postgresql_writer.postSql" type="textarea"
            placeholder="执行数据同步任务之后执行的sql语句，目前只允许执行一条SQL语句，例如加上某一个时间戳"></el-input>
        </el-form-item>

        <el-form-item label="批次量">
          <el-input-number v-model="postgresql_writer.batchSize" :step="512" controls-position="left" @change=""
            :min="512" :max="1048576">
          </el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="write_plugin_save">保存 & 下一步</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>



    <!-- 配置greenplum数据写插件的对话框 -->

    <el-dialog title="配置写插件" :visible="write_plugin_name==='greenplumwriter'" @close="write_plugin_name=''">
      <el-form ref="" :model="greenplum_writer" label-width="100px">
        <el-form-item label="插件名称">
          <el-input v-model="write_plugin_name" :readonly="true">
          </el-input>
        </el-form-item>
        <el-form-item label="JDBC连接" required>
          <el-input v-model="greenplum_writer.jdbcUrl" placeholder="对端数据库的JDBC连接信息，如jdbc:mysql://127.0.0.1:3306/test">
          </el-input>
        </el-form-item>
        <el-form-item label="账号" required>
          <el-input v-model="greenplum_writer.username" placeholder="数据源的用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" required>
          <el-input v-model="greenplum_writer.password" placeholder="数据源指定用户名的密码"></el-input>
        </el-form-item>
        <el-form-item label="读取表" required>
          <el-input v-model="greenplum_writer.table" placeholder="所选取的需要同步的表名,使用JSON数据格式，当配置为多张表时，用户自己需保证多张表是同一表结构">
          </el-input>
        </el-form-item>
        <el-form-item label="表中列" required>
          <el-input v-model="greenplum_writer.column" placeholder="所配置的表中需要同步的列名集合，例: *"></el-input>
        </el-form-item>

        <el-form-item label="初始语句">
          <el-input v-model="greenplum_writer.preSql"
            placeholder="执行数据同步任务之前率先执行的sql语句，目前只允许执行一条SQL语句，例如清除旧数据, 涉及到的表可用 @table表示" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="post语句">
          <el-input v-model="greenplum_writer.postSql" type="textarea"
            placeholder="执行数据同步任务之后执行的sql语句，目前只允许执行一条SQL语句，例如加上某一个时间戳"></el-input>
        </el-form-item>

        <el-form-item label="线程队列">
          <el-input-number v-model="greenplum_writer.queueSize" :step="100" controls-position="left" @change=""
            :min="100" :max="6000">
          </el-input-number>
        </el-form-item>
        <el-form-item label="格式化线程">
          <el-input-number v-model="greenplum_writer.numProc" :step="1" controls-position="left" @change="" :min="1"
            :max="100">
          </el-input-number>
        </el-form-item>

        <el-form-item label="写入并发">
          <el-input-number v-model="greenplum_writer.numWriter" :step="1" controls-position="left" @change="" :min="1"
            :max="20">
          </el-input-number>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="write_plugin_save">保存 & 下一步</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>



    <!-- 配置stream数据写插件的对话框 -->

    <el-dialog title="配置写插件" :visible="write_plugin_name==='streamwriter'" @close="write_plugin_name=''">
      <el-form ref="" :model="stream_writer" label-width="100px">
        <el-form-item label="插件名称">
          <el-input v-model="write_plugin_name" :readonly="true">
          </el-input>
        </el-form-item>
        <el-form-item label="字符集" required>
          <el-input v-model="stream_writer.encoding" required>
          </el-input>
        </el-form-item>
        <el-form-item label="是否打印" required>
          <el-switch v-model="stream_writer.print" placeholder="是否console输出"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="write_plugin_save">保存 & 下一步</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <!-- 配置mysql数据写插件的对话框 -->

    <el-dialog title="配置写插件" :visible="write_plugin_name==='mysqlwriter'" @close="write_plugin_name=''">
      <el-form ref="" :model="mysql_writer" label-width="100px">
        <el-form-item label="插件名称">
          <el-input v-model="write_plugin_name" :readonly="true">
          </el-input>
        </el-form-item>
        <el-form-item label="JDBC连接" required>
          <el-input v-model="mysql_writer.jdbcUrl" placeholder="对端数据库的JDBC连接信息，如jdbc:mysql://127.0.0.1:3306/test">
          </el-input>
        </el-form-item>
        <el-form-item label="账号" required>
          <el-input v-model="mysql_writer.username" placeholder="数据源的用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" required>
          <el-input v-model="mysql_writer.password" placeholder="数据源指定用户名的密码"></el-input>
        </el-form-item>
        <el-form-item label="写入模式">
          <el-radio-group v-model="mysql_writer.writeMode">
            <el-radio label="insert"></el-radio>
            <el-radio label="replace"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="读取表" required>
          <el-input v-model="mysql_writer.table" placeholder="所选取的需要同步的表名,使用JSON数据格式，当配置为多张表时，用户自己需保证多张表是同一表结构">
          </el-input>
        </el-form-item>
        <el-form-item label="表中列" required>
          <el-input v-model="mysql_writer.column" placeholder="所配置的表中需要同步的列名集合，例: *"></el-input>
        </el-form-item>

        <el-form-item label="会话配置" required>
          <el-input v-model="mysql_writer.session" placeholder="配置会话属性" type="textarea"></el-input>
        </el-form-item>

        <el-form-item label="初始语句">
          <el-input v-model="mysql_writer.preSql"
            placeholder="执行数据同步任务之前率先执行的sql语句，目前只允许执行一条SQL语句，例如清除旧数据, 涉及到的表可用 @table表示" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="post语句">
          <el-input v-model="mysql_writer.postSql" type="textarea"
            placeholder="执行数据同步任务之后执行的sql语句，目前只允许执行一条SQL语句，例如加上某一个时间戳"></el-input>
        </el-form-item>

        <el-form-item label="批次量">
          <el-input-number v-model="mysql_writer.batchSize" :step="512" controls-position="left" @change="" :min="512"
            :max="1048576">
          </el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="write_plugin_save">保存 & 下一步</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <!-- 配置oracle数据写插件的对话框 -->

    <el-dialog title="配置写插件" :visible="write_plugin_name==='oraclewriter'" @close="write_plugin_name=''">
      <el-form ref="" :model="oracle_writer" label-width="100px">
        <el-form-item label="插件名称">
          <el-input v-model="write_plugin_name" :readonly="true">
          </el-input>
        </el-form-item>
        <el-form-item label="JDBC连接" required>
          <el-input v-model="oracle_writer.jdbcUrl"
            placeholder="对端数据库的JDBC连接信息，如jdbc:oracle:thin:@[HOST_NAME]:PORT:[DATABASE_NAME]">
          </el-input>
        </el-form-item>
        <el-form-item label="账号" required>
          <el-input v-model="oracle_writer.username" placeholder="数据源的用户名"></el-input>
        </el-form-item>
        <el-form-item label="密码" required>
          <el-input v-model="oracle_writer.password" placeholder="数据源指定用户名的密码"></el-input>
        </el-form-item>
        <el-form-item label="写入模式">
          <el-radio-group v-model="oracle_writer.writeMode">
            <el-radio label="insert"></el-radio>
            <el-radio label="update"></el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="读取表" required>
          <el-input v-model="oracle_writer.table" placeholder="所选取的需要同步的表名,使用JSON数据格式，当配置为多张表时，用户自己需保证多张表是同一表结构">
          </el-input>
        </el-form-item>
        <el-form-item label="表中列" required>
          <el-input v-model="oracle_writer.column" placeholder="所配置的表中需要同步的列名集合，例: *"></el-input>
        </el-form-item>

        <el-form-item label="会话配置" required>
          <el-input v-model="oracle_writer.session" placeholder="配置会话属性" type="textarea"></el-input>
        </el-form-item>

        <el-form-item label="初始语句">
          <el-input v-model="oracle_writer.preSql"
            placeholder="执行数据同步任务之前率先执行的sql语句，目前只允许执行一条SQL语句，例如清除旧数据, 涉及到的表可用 @table表示" type="textarea"></el-input>
        </el-form-item>
        <el-form-item label="post语句">
          <el-input v-model="oracle_writer.postSql" type="textarea"
            placeholder="执行数据同步任务之后执行的sql语句，目前只允许执行一条SQL语句，例如加上某一个时间戳"></el-input>
        </el-form-item>

        <el-form-item label="批次量">
          <el-input-number v-model="oracle_writer.batchSize" :step="512" controls-position="left" @change="" :min="512"
            :max="1048576">
          </el-input-number>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="write_plugin_save">保存 & 下一步</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 日志查看窗口 -->
    <el-dialog title="日志查看窗口" :visible="file_log_diag_visual" @close="jobInfoLogDiagClose">
      <el-input id="log_scroll_text" type="textarea" v-model="file_log_data" rows=100 :readonly="true"></el-input>
    </el-dialog>
  </div>
  <script>
    var vueinstance = Vue.extend(Main)
    new vueinstance().$mount('#app')
  </script>
</body>

</html>